<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left" />
      <el-select v-model="searchInfo.orderType" style="width:140px;" clearable placeholder="订单状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="searchInfo.type" style="width:140px;" clearable placeholder="订单类型">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="searchInfo.nickName" style="width:140px;" placeholder="会员昵称" />
      <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
    </div>
    <el-table
      ref="table"
      border
      :data="tableData"
      :height="this.$getTableHeight"
      style="width: 100%"
      stripe
    >
      <el-table-column show-overflow-tooltip prop="orderNumber" label="订单号" />
      <el-table-column show-overflow-tooltip prop="creationTime" label="订单创建时间" />
      <el-table-column show-overflow-tooltip prop="nickName" label="会员昵称" />
      <el-table-column show-overflow-tooltip label="订单状态">
        <template
          slot-scope="scope"
        >{{ scope.row.orderType === 0 ? '未支付' :scope.row.orderType === 1 ? '已支付':scope.row.orderType === 2 ?'过期' :'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="amount" label="交易金额" />
      <el-table-column show-overflow-tooltip label="订单类型">
        <template
          slot-scope="scope"
        >{{ scope.row.type === 0 ? '付费会员订单':scope.row.type === 0 ?'课程订单':'' }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="remark" label="交易备注" />
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import mmUrl from '~/utils/utilUrl';
import Pagination from '~/components/commom/pagination';
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _searchInfo,
  changeTableHeight
} from '~/utils/util';
export default {
  components: {
    Pagination
  },
  data() {
    return {
      totalCount: 0,
      tableData: [],
      loading: true,
      changeSelectOr: false,
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      },
      searchInfo: {
        orderType: null,
        nickName: '',
        type: null
      },
      copySearchInfo: { orderType: null, nickName: '', type: null },
      options: [
        {
          label: '未支付',
          value: 0
        },
        {
          label: '已支付',
          value: 1
        },
        {
          label: '过期',
          value: 2
        }
      ],
      options1: [
        {
          label: '付费会员订单',
          value: 0
        },
        {
          label: '课程订单',
          value: 1
        }
      ]
    }
  },
  mounted() {
    this.getInitTableDate()
  },
  methods: {
    getInitTableDate() {
      this.$post({
        url: mmUrl.member.getOrder,
        data: {
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 20,
            skipCount: 0
          },
          keyword: ''
        }
      }).then(res => {
        this.totalCount = res.items.totalCount
        this.tableData = res.items.items
        this.loading = false
        changeTableHeight(this)
      })
    },
    searchInfoMation(res) {
      this.copySearchInfo = JSON.parse(JSON.stringify(this.searchInfo))
      const result = _searchInfo(res, this.page, this.copySearchInfo)
      this.changeTableData(result)
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.member.getOrder, res, that)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copySearchInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copySearchInfo)
      this.changeTableData(result)
    }
  }
}
</script>

<style>
</style>
